<template>
  <div
    class="classfication-swiper-wrapper"
    v-if="listData && listData.length > 0"
  >
    <nut-scroller>
      <div
        class="classfication-wrapper flex f-ai-c"
        slot="list"
        v-for="(item, index) of listData"
        :key="item.name"
      >
        <img
          class="circle-logo"
          v-if="index === active_index"
          src="../assets/circle.png"
          alt=""
        />
        <span
          class="classfication-name"
          :class="index === active_index ? 'gradual-change' : ''"
          @click="handleClickClassfication(index)"
          >{{ item.name }}</span
        >
      </div>
    </nut-scroller>
  </div>
</template>

<script>
import Vue from "vue";
import { Scroller } from "@nutui/nutui";
Scroller.install(Vue);
export default {
  name: "ClassficationSwiper",
  props: {
    key_name: {
      type: String,
      required: true
    },
    classfication_list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active_index: 0,
      listData: JSON.parse(JSON.stringify(this.classfication_list))
    };
  },
  methods: {
    handleClickClassfication(index) {
      this.active_index = index;
      this.$emit(
        "handleClickClassfication",
        this.key_name,
        this.listData[index].name
      );
    }
  }
};
</script>

<style scoped>
.classfication-swiper-wrapper {
  width: 100%;
  height: 40px;

  background: white;
}
.classfication-wrapper {
  padding: 0 10px;
  height: 40px;

  white-space: nowrap;
}
.circle-logo {
  margin-right: 5px;
  width: 12px;
  height: 12px;
}
.classfication-name {
  position: relative;
  font-size: 15px;
}
</style>
